<template>
    <el-breadcrumb separator="/" class="breadcrumb">
    
        <el-breadcrumb-item v-for="v in lists" :key="v.path">{{v.meta.title}}</el-breadcrumb-item>
        
    </el-breadcrumb>
</template>

<script setup>
import {reactive ,ref ,onMounted ,watch} from 'vue'
import {useRoute} from 'vue-router'

const route = useRoute();
const lists = ref([]); //路由数据

//监听路由变化
watch(route,(to,from)=>{
     getBreadcrumb(to.matched);
})
onMounted(()=>{
    console.log(route.matched); //路由数据信息
    getBreadcrumb(route.matched);
})

const getBreadcrumb = matched =>{
    lists.value = matched;
}

</script>